<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Editar Idea de Investigación, Desarrollo e Innovación"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
            <h:form>
                <h:panelGrid columns="2">
                    <h:outputLabel value="Idea de Origen" for="idea" />
                    <rich:select id="idea" value="#{ideaController.ideaSeleccionada}" listWidth="500">
                        <f:selectItems value="#{ideaController.itemsAvailableSelectOne}"/>
                        <a4j:ajax event="selectitem" render="editarIdea" execute="@this" />

                    </rich:select>

                </h:panelGrid>

                <rich:panel id="editarIdea">
                    <rich:tabPanel  switchType="client">
                        <rich:tab id="tabInfo" header="Información General">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Título de la Idea" for="titulo" />
                                <h:inputTextarea id="titulo" value="#{ideaController.selected.titulo}" rows="2" cols="30" required="true" requiredMessage="Se requiere el título"/>
                                <h:outputLabel value="Entidad que Avala" for="entidad" />
                                <h:outputText id="entidad" value="#{ideaController.selected.entidad.nombre}"/>

                                <h:outputLabel value="Subdirección u Oficina" for="subdireccion" />
                                <h:outputText id="subdireccion" value="#{ideaController.selected.subdireccion.nombreSubdireccion}"/>

                                <h:outputLabel value="Línea de Investigación" for="lineaInvestigacion" />
                                <h:outputText id="lineaInvestigacion" value="#{ideaController.selected.lineainvestigacion}"/>

                                <h:outputLabel value="Gran Área de Investigación" />
                                <h:outputText value="#{ideaController.selected.areainvestigacion.nombreArea}"/>

                                <h:outputLabel value="Área" for="subarea" />
                                <h:outputText id="subarea" value="#{ideaController.selected.subarea.nombre}"/>

                                <h:outputLabel value="Subárea" for="subarea1" />
                                <h:outputText id="subarea1" value="#{ideaController.selected.subarea1.nombre}"/>

                                <h:outputLabel value="Especialidad" for="especialidad"  />
                                <h:outputText id="especialidad" value="#{ideaController.selected.subarea2.nombre}"/>

                                <h:outputLabel value="Investigador" for="investigador" />
                                <rich:select id="investigador" value="#{ideaController.selected.investigador}" title="#{bundle.CreateIdeaTitle_investigador}" >
                                    <f:selectItems value="#{investigadorController.itemsAvailableSelectOne}"/>
                                </rich:select>
                            </h:panelGrid>
                        </rich:tab>
                        <rich:tab header="Tipo de propuesta de Investigación y Objetivos">
                            <h:panelGrid columns="3" style="vertical-align: middle">
                                <h:outputLabel value="Tipo de Proyecto" for="tipoproyecto" />
                                <rich:select id="tipoproyecto" value="#{ideaController.selected.tipoproyecto}" listWidth="260">
                                    <f:selectItems value="#{tipoproyectoController.itemsAvailableSelectOne}"/>
                                    <a4j:ajax event="selectitem" render="panelDescripcionTipo" execute="@this" />
                                </rich:select>
                                <rich:panel id="panelDescripcionTipo" >
                                    <h:outputText value="#{ideaController.selected.tipoproyecto.descripcion}"/>
                                </rich:panel>
                            </h:panelGrid>
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Objetivo General" for="objetivoGeneral" />
                                <h:inputTextarea id="objetivoGeneral" value="#{ideaController.selected.objetivoGeneral}" cols="30" rows="2" />
                            </h:panelGrid>
                            <h:panelGrid columns="1">
                                <a4j:commandButton value="Adicionar Objetivo Específico" onclick="#{rich:component('popupObj')}.show()" render="textObjetivo" execute="@this"/> 

                                <rich:panel id="objetivos">
                                    <rich:dataTable value="#{ideaController.selected.objetivoespecificoList}" var="obj" iterationStatusVar="it">
                                        <rich:column>
                                            <f:facet name="header">#</f:facet>
                                            #{it.index+1}
                                        </rich:column>
                                        <rich:column>
                                            <f:facet name="header">Descripción</f:facet>
                                            <h:outputText value="#{obj.descripcion}"/>
                                        </rich:column>
                                        <rich:column>
                                            <a4j:commandLink value="Eliminar" execute="@this" action="#{ideaController.eliminarObjetivo(it.index)}"
                                                             render="objetivos" >
                                            </a4j:commandLink>
                                        </rich:column>
                                    </rich:dataTable>
                                </rich:panel>
                            </h:panelGrid>
                        </rich:tab>
                        <rich:tab id="infoDesc" header="Descripciones">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Problema que origina de la Idea" for="problema" />
                                <h:inputTextarea id="problema" value="#{ideaController.selected.problema}"  cols="30" rows="2"/>
                                <h:outputLabel value="Antecedentes" for="antecedente" />
                                <h:inputTextarea id="antecedente" value="#{ideaController.selected.antecedente}"  cols="30" rows="2"/>
                                <h:outputLabel value="Justificación" for="justificacion" />
                                <h:inputTextarea id="justificacion" value="#{ideaController.selected.justificacion}"  cols="30" rows="2"/>
                                <h:outputLabel value="Metodología" for="metodologia" />
                                <h:inputTextarea id="metodologia" value="#{ideaController.selected.metodologia}" cols="30" rows="2" />
                                <h:outputLabel value="Resultado Esperado" for="resultado" />
                                <h:inputTextarea id="resultado" value="#{ideaController.selected.resultado}"  cols="30" rows="2"/>
                                <h:outputLabel value="Palabras Clave" for="palabrasClave" />
                                <h:inputTextarea id="palabrasClave" value="#{ideaController.selected.palabrasClave}"  cols="30" rows="2"/>
                                <h:outputLabel value="Valor Aproximado" for="valorAprox" />
                                <h:inputText id="valorAprox" value="#{ideaController.selected.valorAprox}" converterMessage="El valor aproximado debe ser un múmero entero"/> 
                            </h:panelGrid>
                        </rich:tab>
                        <rich:tab header="Documentación">
                            <h:panelGrid  columns="1">
                                <a4j:commandButton value="Adicionar Documento" onclick="#{rich:component('popupDoc')}.show()" render="textDocs" execute="@this"/> 
                                <rich:panel id="documentos">
                                    <rich:dataTable value="#{ideaController.selected.documentacionList}" var="docs" iterationStatusVar="it" >
                                        <f:facet name="header">Documentos</f:facet>
                                        <rich:column>
                                            <f:facet name="header">#</f:facet>
                                            #{it.index+1}
                                        </rich:column>
                                        <rich:column> 
                                            <f:facet name="header">Link</f:facet> 
                                            #{docs.link}
                                        </rich:column>
                                        <rich:column> 
                                            <f:facet name="header">Descripción</f:facet> 
                                            #{docs.descripcion}
                                        </rich:column>
                                        <rich:column>
                                            <a4j:commandLink value="Eliminar" execute="@this" action="#{ideaController.eliminarDocumento(it.index)}"
                                                             render="documentos" >
                                            </a4j:commandLink>
                                        </rich:column>
                                    </rich:dataTable>
                                </rich:panel>
                            </h:panelGrid>
                        </rich:tab>
                    </rich:tabPanel>
                </rich:panel>
                <br />
                <a4j:commandLink execute="tabInfo,infoDesc,objetivoGeneral" action="#{ideaController.update()}" value="Guardar Cambios" render="@form, messagePanel"/>
            </h:form>

            <rich:popupPanel id="popupObj" modal="true" resizeable="false" autosized="false" 
                             onmaskclick="#{rich:component('popupObj')}.hide()" height="140" width="220">
                <f:facet name="header">
                    <h:outputText value="Objetivo Específico" />
                </f:facet>
                <f:facet name="controls">
                    <h:outputLink value="#"
                                  onclick="#{rich:component('popupObj')}.hide(); return false;">
                        X
                    </h:outputLink>
                </f:facet>
                <h:form>
                    <h:panelGrid columns="1" style="text-align: center">
                        <h:inputTextarea id="textObjetivo" value="#{objetivoespecificoController.selected.descripcion}" cols="30" rows="2"/>

                        <a4j:commandButton  value="Adicionar" action="#{objetivoespecificoController.adicionarObjetivo(ideaController.selected)}" 
                                            render="objetivos" oncomplete="if (#{facesContext.maximumSeverity==null}) 
                                            #{rich:component('popupObj')}.hide();"/>
                    </h:panelGrid>
                </h:form>
            </rich:popupPanel>

            <rich:popupPanel id="popupDoc" modal="true" resizeable="false" autosized="false" 
                             onmaskclick="#{rich:component('popupDoc')}.hide()" height="240" width="320">
                <f:facet name="header">
                    <h:outputText value="Adición de Documento" />
                </f:facet>
                <f:facet name="controls">
                    <h:outputLink value="#"
                                  onclick="#{rich:component('popupDoc')}.hide(); return false;">
                        X
                    </h:outputLink>
                </f:facet>
                <h:form>
                    <rich:panel id="textDocs">
                        <h:panelGrid  columns="2" style="text-align: center; vertical-align: middle">
                            <h:outputText value="Descripción del Documento"/>
                            <h:inputTextarea id="textDesc" value="#{documentacionController.selected.descripcion}" cols="30" rows="2"/>
                            <h:outputText value="Link"/>
                            <h:inputTextarea id="textDoc" value="#{documentacionController.selected.link}" cols="30" rows="2"/>
                            <a4j:commandButton  value="Adicionar" action="#{documentacionController.adicionarDocumento(ideaController.selected)}" 
                                                render="documentos" oncomplete="if (#{facesContext.maximumSeverity==null}) 
                                                #{rich:component('popupDoc')}.hide();"/>

                        </h:panelGrid>
                    </rich:panel>
                </h:form>

            </rich:popupPanel>

        </ui:define>
    </ui:composition>

</html>
